<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="after-navber" :style="'background-image: url('+data.page_img.bg+')'">
            <view @tap="showRule" class="rule-btn">活动规则</view>
            <view :class="['rule-bg', data.showRule?'show':'']"></view>
            <view :class="['rule-content', data.showRule?'show':'']">
                <view @tap="closeRule" class="rule-close">
                    <image :src="data.page_img.close"></image>
                </view>
                <view class="rule-text">
                    <view class="rule-title">-拆红包活动规则-</view>
                    <text>{{data.rule}}</text>
                </view>
            </view>
            <view class="main-content">
                <view :class="['share-modal', data.showShareModal?'show':'']" v-if="data.is_my_hongbao&&data.hongbao.is_finish==0&&data.hongbao.is_expire==0">
                    <view @tap="closeShareModal" class="modal-bg"></view>
                    <view class="modal-box" :style="'background-image: url('+data.page_img.share_modal_bg+')'">
                        <view class="modal-text">还差
                            <text>{{data.rest_user_num}}</text>
                            个人即可拆红包
                        </view>
                        <view class="modal-text">一起瓜分
                            <text>{{data.coupon_total_money}}</text>
                            元！
                        </view>
                        <view class="flex flex-row flex-x-center hongbao-info-btn">
                            <view class="flex-y-center">
                                <image :src="data.page_img.wechat"></image>
                            </view>
                            <view class="flex-y-center">邀请好友一起拆</view>
														<!-- #ifdef MP-WEIXIN -->
														<button class="share-btn" openType="share"></button>
														<!-- #endif -->
                            <!-- #ifdef H5 -->
                            <button class="share-btn" @click="onShareWebMessage"></button>
                            <!-- #endif -->
                        </view>
                        <view @tap="closeShareModal" class="modal-close">
                            <image :src="data.page_img.close"></image>
                        </view>
                    </view>
                </view>
                <view class="hongbao-info" v-if="data.hongbao.is_finish==0&&data.hongbao.is_expire==0">
                    <view class="user-list">
                        <block v-if="data.hongbao_list" v-for="(item,index) in data.hongbao_list" :key="index">
                            <view class="user-item" v-if="item">
                                <image :src="item.avatar_url"></image>
                            </view>
                            <view class="user-item none" v-else></view>
                        </block>
                    </view>
                    <view class="hongbao-info-text">还差{{data.rest_user_num}}人即可瓜分{{data.coupon_total_money}}元红包,快邀请好友来拆</view>
                    <view class="hongbao-info-text">{{data.rest_time_str}}后结束</view>
                    <view class="flex flex-row flex-x-center hongbao-info-btn" v-if="data.is_my_hongbao">
                        <view class="flex-y-center">
                            <image :src="data.page_img.wechat"></image>
                        </view>
                        <view class="flex-y-center">邀请好友一起拆</view>
                        <!-- #ifdef MP-WEIXIN -->
                        <button class="share-btn" openType="share"></button>
                        <!-- #endif -->
                        <!-- #ifdef H5 -->
                        <button class="share-btn" @click="onShareWebMessage"></button>
                        <!-- #endif -->
                    </view>
                    <block v-else>
                        <form @submit="detailSubmit" reportSubmit="true">
                            <view class="flex flex-row flex-x-center hongbao-info-btn" style="margin-bottom: 32upx">
                                <view class="flex-y-center">一起拆红包</view>
                                <button class="share-btn" formType="submit"></button>
                            </view>
                        </form>
                        <navigator class="flex flex-row flex-x-center hongbao-info-btn hongbao-info-btn-org" openType="redirect" url="/pages/fxhb/open/open">
                            <view class="flex-y-center">拆一个新红包</view>
                            <view class="flex-y-center">
                                <image class="pointer-r" :src="data.page_img.pointer_r"></image>
                            </view>
                        </navigator>
                    </block>
                </view>
                <view class="hongbao-info" v-if="data.hongbao.is_expire==1">
                    <view class="hongbao-info-text">超过规定时间，该红包不能拆了</view>
                    <view class="hongbao-info-text" style="text-align: center">
                        <image :src="data.page_img.cry" style="width: 190upx;height: 168upx;margin: 24upx 0"></image>
                    </view>
                    <navigator class="flex flex-row flex-x-center hongbao-info-btn" openType="redirect" url="/pages/fxhb/open/open">
                        <view class="flex-y-center">拆一个新红包</view>
                    </navigator>
                </view>
                <view class="hongbao-info" v-if="data.hongbao.is_finish==1&&!data.my_coupon">
                    <view class="user-list">
                        <block v-if="data.hongbao_list" v-for="(item,index) in data.hongbao_list" :key="index">
                            <view class="user-item" v-if="item">
                                <image :src="item.avatar_url"></image>
                            </view>
                            <view class="user-item none" v-else></view>
                        </block>
                    </view>
                    <view class="hongbao-info-text">很遗憾，该红包已被瓜分完了</view>
                    <navigator openType="redirect" url="/pages/fxhb/open/open">
                        <view class="flex flex-row flex-x-center hongbao-info-btn">
                            <view class="flex-y-center">拆一个新红包</view>
                        </view>
                    </navigator>
                </view>
                <view class="hongbao-info" v-if="data.hongbao.is_finish==1&&data.my_coupon">
                    <view style="text-align: center;margin-bottom: 24upx">恭喜您，已成功瓜分红包</view>
                    <view class="flex flex-row flex-y-center coupon" :style="'background-image: url('+data.page_img.coupon+')'">
                        <view class="flex-grow-1">
                            <view class="coupon-title">满减券</view>
                            <view class="coupon-desc">满{{data.my_coupon.use_minimum}}可用</view>
                        </view>
                        <view class="flex-grow-0 flex-row flex-y-bottom" style="min-width: 200upx">
                            <view class="coupon-unit">￥</view>
                            <view class="coupon-money">{{data.my_coupon.money}}</view>
                        </view>
                    </view>
                    <navigator openType="redirect" url="/pages/list/list">
                        <view class="flex flex-row flex-x-center hongbao-info-btn" style="margin-bottom: 32upx">
                            <view class="flex-y-center">立即使用</view>
                        </view>
                    </navigator>
                    <navigator openType="redirect" url="/pages/fxhb/open/open">
                        <view class="flex flex-row flex-x-center hongbao-info-btn hongbao-info-btn-org">
                            <view class="flex-y-center">拆一个新红包</view>
                            <view class="flex-y-center">
                                <image class="pointer-r" :src="data.page_img.pointer_r"></image>
                            </view>
                        </view>
                    </navigator>
                </view>
                <view class="hongbao-info" v-if="data.hongbao.is_finish==1">
                    <view class="flex flex-row">
                        <view class="flex-grow-1 flex-y-center">
                            <view style="width: 100%;height: 2upx;background: #dbdbdb"></view>
                        </view>
                        <view class="flex-grow-0" style="padding: 0 50upx">看看大家手气</view>
                        <view class="flex-grow-1 flex-y-center">
                            <view style="width: 100%;height: 2upx;background: #dbdbdb"></view>
                        </view>
                    </view>
                    <view class="flex flex-row flex-y-center user-hongbao" v-for="(item,index) in data.hongbao_list" :key="index">
                        <view class="flex-grow-0">
                            <image class="user-avatar" :src="item.avatar_url"></image>
                        </view>
                        <view class="flex-grow-1">
                            <view class="user-nickname">{{item.nickname}}</view>
                        </view>
                        <view class="flex-grow-0">{{item.coupon_money}}元</view>
                        <view class="best-icon flex flex-row flex-y-center" v-if="item.is_best">
                            <view>
                                <image :src="data.page_img.best_icon"></image>
                            </view>
                            <view>手气最佳</view>
                        </view>
                    </view>
                </view>
                <view class="more-goods" v-if="data.goods_list">
                    <view class="flex flex-row" style="margin: 0 10upx 32upx 10upx">
                        <view class="flex-grow-1 flex-y-center">
                            <image :src="data.page_img.more_l" style="height: 4upx;width: 100%"></image>
                        </view>
                        <view class="flex-grow-0" style="padding: 0 64upx;color: #fff">更多商品推荐</view>
                        <view class="flex-grow-1 flex-y-center">
                            <image :src="data.page_img.more_r" style="height: 4upx;width: 100%"></image>
                        </view>
                    </view>
                    <view class="goods-list">
                        <view class="goods-item-box" v-for="(item,index) in data.goods_list" :key="index">
                            <navigator class="goods-item" :url="'/pages/goods/goods?id='+item.id">
                                <image mode="aspectFill" :src="item.pic_url"></image>
                                <view style="padding: 20upx 24upx">
                                    <view class="goods-name-box">
                                        <view class="goods-name">{{item.name}}</view>
                                    </view>
                                    <view class="flex flex-row flex-y-bottom">
                                        <view class="flex-grow-1 goods-price">￥{{item.price}}</view>
                                        <view class="flex-grow-0 goods-original-price">￥{{item.original_price}}</view>
                                    </view>
                                    <view class="buy-btn">去抢购</view>
                                </view>
                            </navigator>
                        </view>
                    </view>
                </view>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var e = null;
	export default {
		data() {
			return {
				data: {
        page_img: {
            bg: this.getApp.webRoot + "/statics/images/fxhb/bg.png",
            close: this.getApp.webRoot + "/statics/images/fxhb/close.png",
            hongbao_bg: this.getApp.webRoot + "/statics/images/fxhb/hongbao_bg.png",
            open_hongbao_btn: this.getApp.webRoot + "/statics/images/fxhb/open_hongbao_btn.png",
            wechat: this.getApp.webRoot + "/statics/images/fxhb/wechat.png",
            coupon: this.getApp.webRoot + "/statics/images/fxhb/coupon.png",
            pointer_r: this.getApp.webRoot + "/statics/images/fxhb/pointer_r.png",
            best_icon: this.getApp.webRoot + "/statics/images/fxhb/best_icon.png",
            more_l: this.getApp.webRoot + "/statics/images/fxhb/more_l.png",
            more_r: this.getApp.webRoot + "/statics/images/fxhb/more_r.png",
            cry: this.getApp.webRoot + "/statics/images/fxhb/cry.png",
            share_modal_bg: this.getApp.webRoot + "/statics/images/fxhb/share_modal_bg.png"
        },
        goods_list: null,
        rest_time_str: "--:--:--",
				hongbao: {
					is_finish: 0
				}
    },
			};
		},
		onLoad: function(e) {myVue = this;
        var t = this;
        myVue.getApp.page.onLoad(this, e);
        var a = e.id;
        myVue.getApp.core.showLoading({
            title: "加载中",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.fxhb.detail,
            data: {
                id: a
            },
            success: function(e) {
                t.getApp.core.hideLoading(), 1 != e.code ? (0 == e.code && (t.setData({
                    rule: e.data.rule,
                    share_pic: e.data.share_pic,
                    share_title: e.data.share_title,
                    coupon_total_money: e.data.coupon_total_money,
                    rest_user_num: e.data.rest_user_num,
                    rest_time: e.data.rest_time,
                    hongbao: e.data.hongbao,
                    hongbao_list: e.data.hongbao_list,
                    is_my_hongbao: e.data.is_my_hongbao,
                    my_coupon: e.data.my_coupon,
                    goods_list: e.data.goods_list
                }), t.setRestTimeStr()), t.showShareModal()) : t.getApp.core.showModal({
                    title: "提示",
                    content: e.msg,
                    showCancel: !1,
                    success: function(t) {
                        t.confirm && (1 == e.game_open ? t.getApp.core.redirectTo({
                            url: "/pages/fxhb/open/open"
                        }) : t.getApp.core.redirectTo({
                            url: "/pages/index/index"
                        }));
                    }
                });
            }
        });
    },
    onReady: function() {
        myVue.getApp.page.onReady(this);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this);
    },
		onShareAppMessage: function() {
        var e = this;
        myVue.getApp.page.onShareAppMessage(this);
        var t = e.data.__user_info;
        return {
            path: "/pages/fxhb/detail/detail?id=" + e.data.hongbao.id + (t ? "&user_id=" + t.id : ""),
            title: e.data.share_title || null,
            imageUrl: e.data.share_pic || null,
            complete: function(t) {
                e.closeShareModal();
            }
        };
    },
		methods: {
			showRule: function() {
        this.setData({
            showRule: !0
        });
    },
    closeRule: function() {
        this.setData({
            showRule: !1
        });
    },
    showShareModal: function() {
        this.setData({
            showShareModal: !0
        });
    },
    closeShareModal: function() {
        this.setData({
            showShareModal: !1
        });
    },
    setRestTimeStr: function() {
        var t = this, a = t.data.rest_time || !1;
        !1 !== a && null !== a && ((a = parseInt(a)) <= 0 ? t.setData({
            rest_time_str: "00:00:00"
        }) : (e && clearInterval(e), e = setInterval(function() {
            if ((a = t.data.rest_time) <= 0) return clearInterval(e), void t.setData({
                rest_time_str: "00:00:00"
            });
            var o = parseInt(a / 3600), s = parseInt(a % 3600 / 60), i = parseInt(a % 3600 % 60);
            t.setData({
                rest_time: a - 1,
                rest_time_str: (o < 10 ? "0" + o : o) + ":" + (s < 10 ? "0" + s : s) + ":" + (i < 10 ? "0" + i : i)
            });
        }, 1e3)));
    },
    detailSubmit: function(e) {
        var t = this;
        myVue.getApp.core.showLoading({
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.fxhb.detail_submit,
            method: "post",
            data: {
                id: t.data.hongbao.id,
                form_id: e.detail.formId
            },
            success: function(e) {
                if (1 == e.code) return t.getApp.core.hideLoading(), void t.getApp.core.showToast({
                    title: e.msg,
                    complete: function() {
                        0 == e.game_open && t.getApp.core.redirectTo({
                            url: "/pages/index/index"
                        });
                    }
                });
                0 == e.code && (t.getApp.core.hideLoading(), t.getApp.core.showToast({
                    title: e.msg,
                    complete: function() {
                        1 == e.reload && t.getApp.core.redirectTo({
                            url: "/pages/fxhb/detail/detail?id=" + t.options.id
                        });
                    }
                }));
            }
        });
    },
		onShareWebMessage: function() {
        var e = this;
        var t = e.data.__user_info;
				this.$webShare({
					path: "/pages/fxhb/detail/detail?id=" + e.data.hongbao.id + (t ? "&user_id=" + t.id : ""),
					title: e.data.share_title || null,
					imageUrl: e.data.share_pic || null,
				}).then(function() {
					e.closeShareModal();
				})
    },
		},
	}
</script>

<style scoped>
@import "../../../__wuBaseWxss__/19.css";

.after-navber {
    background-size: 100% auto;
    background-color: #fe6b2e;
    background-repeat: no-repeat;
}

.rule-btn {
    position: relative;
    float: right;
}

.main-content {
    padding-top: 396upx;
}

.share-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: 150ms;
}

.share-modal.show {
    opacity: 1;
    visibility: visible;
}

.share-modal .modal-bg {
    background: rgba(0,0,0,.5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: -1;
}

.share-modal .modal-box {
    width: 606upx;
    height: 816upx;
    top: 50%;
    left: 72upx;
    margin-top: -408upx;
    position: fixed;
    z-index: 1;
    background-size: 100% 100%;
    background-color: #fff;
    border-radius: 16upx;
    padding: 448upx 25upx 0 25upx;
}

.share-modal .modal-text {
    text-align: center;
    color: #888;
    margin-bottom: 32upx;
}

.share-modal .modal-text text {
    font-size: 15pt;
    color: #ffc73f;
    font-weight: bold;
}

.share-modal .modal-close {
    padding: 25upx;
    position: fixed;
    left: 50%;
    margin-left: -50upx;
    top: 50%;
    margin-top: 420upx;
}

.share-modal .modal-close image {
    width: 50upx;
    height: 50upx;
}

.hongbao-info {
    background: rgba(255,255,255,0.9);
    border-radius: 16upx;
    margin: 0 24upx;
    padding: 50upx;
    margin-bottom: 32upx;
}

.user-list {
    overflow: hidden;
}

.user-list .user-item {
    border: 1px solid #ff5c5c;
    width: 104upx;
    height: 104upx;
    margin: 23upx;
    display: inline-block;
    overflow: hidden;
    border-radius: 999upx;
    background-color: #fff;
    float: left;
}

.user-list .user-item.none {
    border-style: dashed;
}

.user-list .user-item image {
    width: 100%;
    height: 100%;
}

.hongbao-info-text {
    text-align: center;
    color: #888;
    margin-bottom: 24upx;
    font-size: 9pt;
}

.hongbao-info-btn {
    height: 88upx;
    border-radius: 999upx;
    text-align: center;
    background: #ff5c5c;
    color: #fff;
    margin: 0 25upx;
    position: relative;
}

.hongbao-info-btn image {
    width: 48upx;
    height: 40upx;
    margin-right: 20upx;
    display: block;
}

.hongbao-info-btn .share-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    opacity: 0;
}

.hongbao-info-btn-org {
    background: #ffb82f;
}

.hongbao-info-btn .pointer-r {
    margin-left: 16upx;
    width: 16upx;
    height: 18upx;
}

.coupon {
    background-size: 100% 100%;
    height: 190upx;
    background-repeat: no-repeat;
    margin-bottom: 24upx;
}

.coupon .coupon-title {
    font-size: 15pt;
    padding-left: 56upx;
    color: #8f4c1a;
    margin-bottom: 16upx;
}

.coupon .coupon-desc {
    font-size: 9pt;
    padding-left: 56upx;
    color: #8f4c1a;
}

.coupon .coupon-money {
    font-size: 19pt;
    line-height: 1;
    font-weight: bold;
    padding-right: 56upx;
    color: #ff5c5c;
}

.coupon .coupon-unit {
    font-size: 11pt;
    line-height: 1.35;
    color: #ff5c5c;
    padding-bottom: 2upx;
}

.user-hongbao {
    margin: 25upx 0;
    position: relative;
}

.user-hongbao .user-avatar {
    width: 80upx;
    height: 80upx;
    border-radius: 999upx;
    margin-right: 20upx;
}

.user-hongbao .user-nickname {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: 20upx;
    padding-bottom: 5upx;
}

.user-hongbao .best-icon {
    font-size: 9pt;
    position: absolute;
    right: 0;
    bottom: -10upx;
    color: #ffb82f;
}

.user-hongbao .best-icon image {
    width: 40upx;
    height: 30upx;
    margin-right: 20upx;
}

.more-goods {
}

.more-goods .goods-list {
    padding: 0 5upx;
}

.more-goods .goods-item-box,.more-goods .goods-item-box view,.more-goods .goods-item-box image,.more-goods .goods-item-box navgator,.more-goods .goods-item-box text {
    box-sizing: border-box;
}

.more-goods .goods-item-box {
    width: 50%;
    padding: 0 5upx 10upx 5upx;
    display: inline-block;
}

.more-goods .goods-item {
    display: inline-block;
    background: #fff;
    overflow: hidden;
    width: 100%;
}

.more-goods .goods-item image {
    width: calc(100% - 20upx);
    height: 340upx;
    margin: 10upx 10upx 0;
    background-color: #ccc;
}

.more-goods .goods-name-box {
    overflow: visible;
    margin-bottom: 20upx;
    height: 79upx;
}

.more-goods .goods-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.15;
}

.more-goods .goods-price {
    color: #ff5c5c;
    font-weight: bold;
}

.more-goods .goods-original-price {
    font-size: 9pt;
    color: #888;
    text-decoration: line-through;
}

.more-goods .buy-btn {
    text-align: center;
    background: #ff5c5c;
    color: #fff;
    border-radius: 999upx;
    height: 64upx;
    line-height: 64upx;
    font-size: 9pt;
    margin-top: 24upx;
}
</style>
